<template>
<div>
   <el-input-number v-model="num1" @change="handleChange" :min="1" :max="Infinity" label="描述文字" class='margin'></el-input-number>
    <el-checkbox-group v-model="checkboxGroup1"  @change="handleCheckedCitiesChange" >
      <el-checkbox v-for="item in data" :label="item.price" :key="item.id" class='bo'>
          <p><b style='font-size:20px;'>{{item.name}}</b>/￥{{item.price}}</p>
      </el-checkbox>
    </el-checkbox-group>

<p>{{total}}</p>
</div>
</template>

<script>
import axios from 'axios';
 const Datas = [{
        id: 0,
        name: 'A',
        price: '100',
      }, {
        id: 1,
        name: 'B',
        price: '125',
      }, {
        id: 2,
        name: 'C',
        price: '288',
      }, {
        id: 3,
        name: 'D',
        price: '233',
      }, {
        id: 4,
        name: 'E',
        price: '50',
      }, {
        id: 5,
        name: 'F',
        price: '37',
      }, {
        id: 6,
        name: 'G',
        price: '78',
      }, {
        id: 7,
        name: 'H',
        price: '166',
      }];
export default {
  name: 'addMath',
      data() {
      return {
      num1: 1, 
      isActive: 0,
      total: 0,
      data: Datas,
      checkboxGroup1:[],
      oldtotal:''
        }
      },
    methods:{
         handleChange(value) {
           this.total=this.oldtotal;
           //console.log(this.oldtotal);
           //console.log(value);
           this.total=this.total*value;
           this.num1=value;
           return this.total
      },
      handleCheckedCitiesChange(value) {
         this.total=0;
        if(this.num1==1){
          //  console.log(value);
           for(var i=0;i<value.length;i++){
                 var price=parseInt(value[i]);
                  this.total+=price
                  
           }
           this.oldtotal=this.total;
           return this.total
        }
        else{
           for(var i=0;i<value.length;i++){
                 var price=parseInt(value[i]);
                  this.total+=price         
           }
            this.oldtotal=this.total;
             console.log(this.num1);
             console.log(this.total);
             this.total=this.total*this.num1;
            return  this.total;
        }
      }
    }
  }
</script>

<style>
.margin{
  margin-bottom: 20px;
}
.bo{
  margin-left:50px;
  /* border:1px solid #e6e6e6; */
}

</style>
